<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  	<title>商品搜索frm</title>
  	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	  <link rel="stylesheet" type="text/css" href="../../css/iconfont.css" />
  	<link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <style>
        html body{background: #fff !important}
        .aui-bar{padding:0.1rem 0.3rem;box-sizing:border-box;width: 100%;}
        .aui-searchbar{height: 1rem;}
        .aui-border-radius{height: 1rem;line-height: 1rem;margin: 0;border-radius:0.2rem;padding-left: 0.2rem;}
        .aui-searchbar-input input{height: 1rem;font-size:0.373rem;display: flex;align-items: center;}
        .aui-searchbar-cancel{height: 1rem;line-height: 1rem;font-size:0.373rem;width: 1.5rem;color: #fff;}
        .iconsousuo1{font-size: 0.48rem !important;line-height: 1rem !important;color:#ff4c41;display: block;padding-right: 0.2rem}
        .iconsousuo1:before {content: "\e602";}
        /*tab分类*/
        .aui-tab .aui-tab-item{height: 1.2rem;line-height: 1.2rem;font-size:0.426rem;color:#333;padding-top:0.1rem;}
        .aui-tab-item.aui-active{color: #ff4c41;border: none;}
        .aui-active::after{content: "";display: block;margin:-6px auto 0 auto;width:2rem;height: 2px;
          background: #ff4c41;box-sizing: border-box;}
        .contentArea .msgBox{width: 100%;padding-bottom: 0.2rem;}
        .contentArea .msgBox img{width: 100%;height: auto;}
        .msgBox .msgText{width: 100%;display: flex;flex-wrap: nowrap;justify-content: space-around;padding: 0.2rem 0 0.1rem 0;}
        .msgBox .msgText div{width: 2.7rem;display: flex;align-items: center;justify-content: center;text-align: center;
          color: #666;}
        /*搜索历史*/
        .searchRecord{margin:0px 0.2rem;border-top: 1px solid #ededed;padding: 0.2rem;}
        .searchRecord1,.searchRecord2{min-height: 1.5rem;}
        .searchRecord1 p ,.searchRecord2 p{color: #666;padding:0.1rem 0.2rem;}
        .searchRecord1 p{width: 100%;display: inline-flex;justify-content: space-between;}
        .searchRecord1 p .aui-icon-trash{font-size:0.426rem !important;}
        .searchRecord1 div,.searchRecord2 div{display: inline-block;background: #e5e5e5;height:0.8rem;line-height:0.8rem;
        border-radius: 0.4rem;font-size:0.373rem !important;color: #333;padding:0 0.4rem;margin: 0.1rem 0.15rem;overflow:hidden;
        text-overflow:ellipsis;white-space: nowrap;max-width: 8rem;}
        .huoBg{color: #ec5a4b !important; background: #ffecea !important;}
        .huoBg .iconfont{font-size:0.373rem !important; }
        .iconhuo{color: #ec5a4b !important;}

        /*模糊搜索列表*/
        .box2 .aui-list .aui-list-item{height: 1.2rem;line-height: 1.2rem;max-height: 1.2rem;min-height: 1.2rem;font-size: 0.4rem !important;padding-left: 0.3rem}
        .box2 .aui-list .aui-list-item-inner{height: 1.2rem;max-height: 1.2rem;min-height: 1.2rem;}
        .box2 .aui-list .aui-list-item-title{font-size: 0.48rem !important;color:#666;}
        .box2 .aui-list.aui-list-in .aui-list-item {background-position: 0.3rem bottom;}
        .box2 .aui-list-item-arrow:before{right: 0.5rem;width: 0.25rem;height: 0.25rem;}
    </style>
</head>
<body id="wrap">
  <div  id="app">
    <div class="box1">
        <div class="contentArea">
            <div class="msgBox sg-color-bg1">
                <img class="shopMsgImg" src="../../image/home/searchbg1.png" alt="">
                <div class="msgText sg-text-size28">
                    <div id="nameText">复制淘宝标<br>题或者链接</div>
                    <div>打开省果APP</div>
                    <div>自动查找优惠券<br>和补贴然后下单</div>
                </div>
            </div>
        </div>
        <div class="searchRecord sg-text-size28">
            <div class="searchRecord1" v-cloak>
                <p class="sg-text-size32">历史搜索<i class="aui-iconfont aui-icon-trash" tapmode onclick="delectHistory()"></i></p>
                <div v-for="(item,index) in historySearchData" @click="openGoodsListFun(item)">
                  {{item}}
                </div>
            </div>
            <div class="searchRecord2" v-cloak>
                <p class="sg-text-size32">热门搜索</p>
                <div v-for="(item,index) in hotSearchData" :class="{'huoBg':item.is_hot=='1'}" @click="openGoodsListFun(item.keyword)">
                  {{item.keyword}}<span v-if="item.is_hot == 1" class="iconfont iconhuo"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="box2"  style="display:none">
        <div class="aui-content aui-margin-b-15">
            <ul class="aui-list aui-list-in">
                <li class="aui-list-item aui-list-item-middle" v-for="(item1,index1) in kewWordsArrFun" tapmode @click="openGoodsListFun(item1)">
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        <div class="aui-list-item-title">{{item1}}</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
(function (doc, win) {
  	var docEl = doc.documentElement,
  	resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  	recalc = function () {
    		var clientWidth = docEl.clientWidth;
    		if (!clientWidth) return;
    		docEl.style.setProperty('font-size',(clientWidth / 10) + 'px','important');
  	};
  	if(!doc.addEventListener){
        return
    };
  	win.addEventListener(resizeEvt, recalc, false);
  	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
var app;
var search_history = []; //历史搜索列表数据
apiready = function () {
		//解析元素 tapmode 属性，优化点击事件处理 - 第四步
		api.parseTapmode();
    if(api.pageParam.type == 1){
        document.querySelector('.shopMsgImg').src = "../../image/home/searchbg1.png";
        document.querySelector('#nameText').innerHTML = "复制淘宝标<br>题或者链接";
    }else if (api.pageParam.type == 2) {
        document.querySelector('.shopMsgImg').src = "../../image/home/searchbg2.png";
        document.querySelector('#nameText').innerHTML = "复制拼多多<br>标题或者链接";
    }else if (api.pageParam.type == 3) {
        document.querySelector('.shopMsgImg').src = "../../image/home/searchbg3.png";
        document.querySelector('#nameText').innerHTML = "复制京东标<br>题或者链接";
    }
    //初始化数据
    initializeData();
    // 获取热门搜索数据
    getSearchData();
    // 获取历史搜索数据 （历史数据为空时赋给空数组）
    if (api.getPrefs({sync: true,key: 'search_history'}).length == 0) {
        api.setPrefs({
            key: 'search_history',
            value: search_history
        })
    }
    // 历史搜索数据
    api.getPrefs({
        key: 'search_history'
    }, function (ret, err) {
        search_history = JSON.parse(ret.value); //当前历史搜索数据
        app.historySearchData = search_history
    });
    // 有执行其他搜索的时候更新历史搜索数据
    api.addEventListener({
        name: 'historySearchData'
    }, function (ret, err) {
        if(ret.value.key){
          var index = search_history.findIndex(item => {
              return item == ret.value.key
          })
          if (index == -1) {
              search_history.unshift(ret.value.key);
          } else {
              search_history.splice(index, 1);
              search_history.unshift(ret.value.key);
          }
          api.setPrefs({
              key: 'search_history',
              value: search_history.slice(0, 10)
          }, function (ret, err) {
              app.historySearchData = search_history;
          });
        }
    });
    // 模糊查询提示
    api.addEventListener({
        name: 'kewWordsArrFun'
    }, function(ret, err){
        if( ret ){
            app.kewWordsArrFun = ret.value.key;
            if(ret.value.key.length > 0){
                document.querySelector('.box1').style.display = 'none';
                document.querySelector('.box2').style.display = 'block';
            }
        }else{
        }
    });

}

// 初始化数据
function initializeData(){
    app = new Vue({
        el: '#app ,#app1',
        data: {
            kewWordsArrFun:[],//模糊搜索数据
            historySearchData:[],//历史搜索数据对象
            hotSearchData: []//热门搜索数据对象
        }
    });
}
// 获取热门搜索数据
function getSearchData(){
    $api.ajax({
        url: 'api/goods/keyword',
        method: 'get',
    }, function (ret,err) {
        if(ret){
            app.hotSearchData = ret.data.list;
        }else {
            api.toast({
                msg: '网络错误,请稍后重试',
                duration: 1000,
                location: 'middle'
            });
        }
    });
}

//清空历史记录
function delectHistory() {
  api.confirm({
      title: '确定',
      msg: '确定是否清除搜索数据!',
      buttons: ['确定', '取消']
  }, function(ret, err) {
      var index = ret.buttonIndex;
      if(index == 1){
          search_history = [];
          api.setPrefs({
              key: 'search_history',
              value: search_history
          });
          app.historySearchData = [];
      }
  });
}

// 执行搜索跳转搜索商品页面
function openGoodsListFun(words){
    api.openTabLayout({
        name: 'searchGoodsList',
        url: './searchGoodsList_win.html',
        useWKWebView: true,
        bgColor: '#fff',
        pageParam: {
            string: words,
            platformType:api.pageParam.type
        }
    });
}

// 关闭当前页面
function closeWinFun(){
    api.closeWin({});
}
</script>
</html>
